<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<script>
$(function() {
	eval($('#code').text());
});	

function reverse(rollingDivId) {
	$("#" + rollingDivId).reverseRolling();
}

var startMouseEventTime = 0
var endMouseEventTime = 0
var startMouseEvnetX = -1;
var endMouseEventX = -1;

function normal() {
	var rollingDiv = $("#rollingDiv");
	var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
	if (rollingAnimationFrame < 100) {
		rollingAnimationFrame += 10;
	} else {
		rollingAnimationFrame = 100;
		rollingDiv.stopRolling();
	}
	$("#commentDiv").text("rollingAnimationFrame: " + rollingAnimationFrame);
	rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
	setTimeout('normal()', 1000);	
}	

</script>
<body>
<h2>Sample1</h2>
<hr>
<div id="rollingDiv"></div>
<div id="commentDiv"></div>
<hr>
<h2>Script</h2>
<xmp id='code'>
	var rollingDiv = $("#rollingDiv");	
	rollingDiv.rolling("left", 130, 100, 5);
	
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='1 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='2 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='3 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='4 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=v6MKOY9x_ds' target='_new'><img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100' alt='5 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ZBDD7aLd6lc' target='_new'><img src='http://i.ytimg.com/vi/ZBDD7aLd6lc/default.jpg' width='130' height='100' alt='6 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=et-dNoTi8IY' target='_new'><img src='http://i.ytimg.com/vi/et-dNoTi8IY/default.jpg' width='130' height='100' alt='7 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=mX1xyxWkmw0' target='_new'><img src='http://i.ytimg.com/vi/mX1xyxWkmw0/default.jpg' width='130' height='100' alt='8 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=fRWov2pdJkE' target='_new'><img src='http://i.ytimg.com/vi/fRWov2pdJkE/default.jpg' width='130' height='100' alt='9 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=QCmP4bEJfOg' target='_new'><img src='http://i.ytimg.com/vi/QCmP4bEJfOg/default.jpg' width='130' height='100' alt='10 item' border='0'/></a>")
   
	rollingDiv.bind("mouseover", function() {
		 $(this).stopRolling();		 
	});
	rollingDiv.bind("mouseout", function() {
		 $(this).resumeRolling();
	});
	
	var opacity = 0.6;
	
	$('img', rollingDiv.getRollingItems()).css("opacity", opacity);
	
	$('img', rollingDiv.getRollingItems()).hover(
		function() {
			$(this).animate({ 
				width: "130",
				height: "100",
				opacity: 1
			}, 300);
			$("#rollingHeadComment").html("<b><font color='blue'>" + $(this).attr('alt') + "</font></b>");
		},
		function() {
			$(this).animate({ 
				width: "120",
				height: "90",
				opacity: opacity
			}, 300);
			$("#rollingHeadComment").html("<b><font color='white'>...</font></b>");
		}
	);
	rollingDiv.startRolling(30, 0, 50);	
	
	rollingDiv.bindViewingEvent(function(event, currentRollingItem) {
		$("#status").text("viewing");
	});
	
	rollingDiv.bindRollingEvent(function(event) {
		$("#status").text("rolling");
	});
	
	rollingDiv.bindStartEvent(function(event) {
		$("#status").text("start");
	});
	
	rollingDiv.bindStopEvent(function(event) {
		$("#status").text("stop");
	});
</xmp>
</body>